<template>
	<view>
		<span v-show="mainshow">
			<!-- <no-info v-show="!showflag"></no-info> -->
			<div v-show="!showflag" class="flex-center flex-column" style="height: 800rpx;">
				<image src="/static/erro/nodata.png" style="width: 200rpx;height: 200rpx;"></image>
				<text class="font-color-999">暂无信息...</text>
			</div>
			<div v-show="showflag" class="container flex-column flex-space-between" :class="[isTransfer?'active':'container']">
				<view class="flex-column flex-center container-type-box">
					<view class=" item border-bottom  flex-row align-items-center ">
						<text class="text">客户公司：</text>
						<text class="text font-color-666">{{info.user_dep}}</text>
					</view>
					<view class="item border-bottom flex-row align-items-center ">
						<text class="text">客户姓名：</text>
						<text class="text font-color-666">{{info.applicant}}</text>
					</view>
					<view class="item border-bottom flex-row align-items-center " @tap="contact(info.phone)">
						<text class="text">客户联系方式：</text>
						<text class="text font-color-666">{{info.phone}}</text>
					</view>
					<view class="item border-bottom flex-row align-items-center ">
						<text class="text">设备归属：</text>
						<text class="text font-color-666">{{info.user_address}}</text>
					</view>
				</view>
				<view class="container-ischangeparts-box flex-center flex-column ">
					<view class="container-mian-item container-ischangeparts flex-row flex-space-between ">
						<text class="text">是否为转交维修通知:</text>
						<text class="text font-color-666">{{isTransfer?"是":"否"}}</text>
					</view>
					<view v-show="isTransfer" class="container-mian-item container-parts flex-column  ">
						<view class="flex-row item flex-space-between border-bottom">
							<text class="text">原负责工程师:</text>
							<text class="text font-color-666">{{engineeInfoPass.name}}</text>
						</view>
						<view class="flex-row item flex-space-between border-bottom">
							<text class="text">工号:</text>
							<text class="text font-color-666">{{engineeInfoPass.number}}</text>
						</view>
						<view class="flex-row item flex-space-between border-bottom">
							<text class="text">职位:</text>
							<text class="text font-color-666">{{engineeInfoPass.job}}</text>
						</view>

					</view>
				</view>
				<view class="container-ischangeparts-box flex-center flex-column ">
					<view v-show="isTransfer" class="container-mian-item container-parts flex-column  ">
						<view class="flex-row item flex-space-between border-bottom">
							<text class="text">现负责工程师:</text>
							<text class="text font-color-666">{{engineeInfo.name}}</text>
						</view>
						<view class="flex-row item flex-space-between border-bottom">
							<text class="text">工号:</text>
							<text class="text font-color-666">{{engineeInfo.number}}</text>
						</view>
						<view class="flex-row item flex-space-between border-bottom">
							<text class="text">职位:</text>
							<text class="text font-color-666">{{engineeInfo.job}}</text>
						</view>

					</view>
				</view>
				<view class="container-mian flex-center flex-column">
					<view class="fault-box flex-column flex-space-between">
						<text class="fault">故障内容描述：</text>
						<view class="content-box">
							<textarea class="fault-content font-14px" maxlength="300" v-model="info.content" :disabled="true"
							 placeholder-style="color:#CCCCCC" placeholder="故障内容" />
						</view>
					</view>
			</view>
				
			<view class="add-img flex-column">
				<text class="text">故障图片：</text>
				<view class="flex-row img-box">
					<view v-for="(item,key) in info.file" :key="key" class="img-container">
						<image :src="item.file" class="my-img" @tap="preview(item.file)"></image>
					</view>
				</view>
			</view>
			
			<view class="button-box flex-row flex-space-between">
				<!-- <view  class="entering button-bg" @tap="entering()">录入工单</view> -->
				<!-- <view  class="entering button-bg" @tap="remote()">远程处理</view> -->
				<view  class="entering button-bg" @tap="remote()">{{info.status === 0?'录入工单':'更新工单'}}</view>
				<view  class="entering button-bg" @tap="toDetails()" v-if="info.status !== 0" >工单详情</view>
				<view  class="assign button-bg" @tap="handleTap('picker')" v-if="info.status === 0">任务转让</view>
			</view>
			<lb-picker
				ref="picker" 
				mode="multiSelector" 
				:list="transferPeoples"
				:level="1"
				 confirm-color="#09BB07" 
				 @change="handleChange"
				  @confirm="handleConfirm"
				  @cancel="handleCancel">
			</lb-picker>
		</div>
		</span>
		
	</view>
</template>	

<script>
	import uplod from '@/components/sunui-upimg/sunui-upimg.vue'
	import QSswitch from '@/components/QS-inputs-split/elements/QS-switch/index.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import {getRepairDetailsByEquipmentId,getInfo,getEngineerList,transferRepair} from '@/api/user/index.js'
	export default {
		components: {
			uplod,QSswitch,uniCollapse,uniCollapseItem,LbPicker
		},
		data() {
			return {
				mainshow:false,
				showflag:false,
				// 选中的转让人
				transferPeople:'',
				// 选中的转让人id
				transferPeopleId:'',
				// 转让人信息
				transferPeoples: [{
					value: '1',
					label: '小花'
				}, {
					value: '2',
					label: '小花'
				}, {
					value: '3',
					label: '小花'
				}, {
					value: '4',
					label: '小花'
				}, {
					value: '5',
					label: '小花'
				}, {
					value: '6',
					label: '小花'
				}],
				
				id:'',
				isTransfer:'',
				// 现工程师
				engineeInfo:{
				  id: '',
				  number: '',
				  password: '',
				  name: '',
				  job: '',
				  phone: ''
				},
				// 原工程师
				engineeInfoPass:{
				  id: '',
				  number: '',
				  password: '',
				  name: '',
				  job: '',
				  phone: ''
				},
				info: {
					id: 16,
					applicant: " ",
					status:'',
					phone: " ",
					equipment_id: 3,
					status: 3,
					engineer_id: 4,
					engineer_id_pass: '',
					createTime: "2020-05-04 00:00:00",
					content: "",
					file: [
						{
							id: 19,
							repair_id: 16,
							file: ""
						}
					]
				},
				// 工单
				workInfo: {
					id:'',
					type: 1,
					reason: " ",
					result: '',
					solution:"",
					fitting:'',
					fitting_addtion:"",
					file:[{
						id:'',
						report_id:'',
						file:" "
					}]
				
				}
			}
		},
		methods: {
			/**
			 * 联系客户
			 */
			contact(phone){
				let _this = this
				uni.makePhoneCall({
				// 手机号
				phoneNumber: phone, 
				// 成功回调
				success: (res) => {
					console.log('调用成功!')	
				},
				// 失败回调
				fail: (res) => {
					console.log('调用失败!')
				}
			  });
			},
			
			handleTap(picker) {
				this.$refs[picker].show()
			},
			/**
			 * 选择转让人监听回调
			 */
			handleChange(item) {
				console.log(item)
			},
			/**
			 * 任务转让
			 */
			assign(){
				let info = {
					id: this.id,
					engineer_id: this.transferPeopleId
					
				}
				transferRepair(info).then((res)=>{
					console.log(res)
					if(res.code == 1){
						let that = this
						uni.reLaunch({
							url: '/pages/views/engineer/EnteringSuccess/EnteringSuccess?id='+ 3 +'&name='+that.transferPeople,
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			handleConfirm(item) {
				let People = item.item.map(item => item.label).join(' ')
				this.transferPeopleId = item.item.map(item => item.value).join(' ')
				this.transferPeople = People
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确定要将此工单转让给'+ People+"吗？",
				    success: function (res) {
				        if (res.confirm) {
							uni.showLoading({
							    title: '正在转交'
							});
							setTimeout(function () {
							    uni.hideLoading();
							}, 1000);
							// 判断当前工程师是否为高级工程师
						    const job = that.$store.getters.job
							console.log(job)
							if(job === '高级工程师'){
								that.assign()
							}else{
								uni.showToast({
									icon:'none',
									title: '非高级工程师禁止转让工单'
								})
							}
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
				console.log("转让人为："+this.transferPeople)
				
			},
			handleCancel(item) {},
			
			// ############################录入工单#############################
			entering(){
				// 允许从相机和相册扫码
				let that = this
				uni.scanCode({
				    success: function (res) {
						
						console.log("二维码的扫描结果为："+res)
						let id = res.result.split('=')[1]
						console.log("设备id为："+ that.info.equipment_id+"扫描的二维码的设备id为："+id)
						if(id == that.info.equipment_id){
							let _this = that
							uni.navigateTo({
							    url: '/pages/views/engineer/WorkStatement/WorkStatement?equipment_id='+_this.info.equipment_id+'&id=1&repair_id='+_this.info.id
							});
						}else{
							uni.showToast({
								icon: 'none',
								title: "该设备和当前维修单设备不匹配"
							})
						}
				    }
				});
			},
			// ############################图片预览#############################
			preview(imageUrl){
				var imgArr = [];
				imgArr.push(imageUrl);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			// ############################远程处理#############################
			remote(){
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确定要处理此维修单吗？',
				    success: function (res) {
						if (res.confirm) {
							 let _this = that
							 uni.navigateTo({
							     url: '/pages/views/engineer/WorkStatement/WorkStatement?equipment_id='+_this.info.equipment_id+'&id=1&repair_id='+_this.info.id+'&status='+_this.info.status+'&report_id='+_this.info.report_id 
							 });
						} else if (res.cancel) {
						    console.log('用户点击取消');
						}
					}
				})
			},
			//##############################工单详情###########################################
			toDetails(){
				uni.navigateTo({
					url: "/pages/views/engineer/WorkStatementDetails/WorkStatementDetails?id=" + this.info.report_id 
				});
			}
		},
		onShow() {
			/**
			 * 检验当前是否已经登录
			 */
			let curRoute  = this.$mp.page.route;
			this.$intercept.permission(curRoute)
		},
		onLoad(op) {
			this.id = op.id
			console.log("id"+this.id)
			/**
			 * 获取维修单详情信息
			 */
			getRepairDetailsByEquipmentId(this.id).then( async res=>{
				this.info = res.result
				if(this.info.status_pass==1){
					/**
					 * 获取转交工程师信息
					 */
					console.log("转接工程师id为："+this.info.engineer_id_pass)
					// 原工程师
					 getInfo(this.info.engineer_id_pass).then((res)=>{
						this.engineeInfoPass = res.result
						
					})
					// 现工程师
					 getInfo(this.info.engineer_id).then((res)=>{
						this.engineeInfo = res.result
						
					})
					this.isTransfer = true
					// setTimeout(()=>{
					// 	// this.showflag = true
					// },2000)
					
					
				}else{
					this.isTransfer = false
				}
				setTimeout(()=>{
					uni.hideLoading()
					this.showflag = true
					this.mainshow = true
				},1000)
				
			})	
			
			
			/**
			 * 查询工程师信息
			 */
			getEngineerList().then((res)=>{
				let engineers = res.result.data
				let arr2 = []
				engineers.forEach((cur,index,arr)=>{
					arr2.push({value:arr[index].id,label:arr[index].name})
				})
				this.transferPeoples = arr2
				uni.hideLoading()
				this.showflag = true
				
			})
			
			
		},
		
	}
</script>

<style lang="scss" scoped>
	
	.container {
		background-color: #EFEFF4;
		width: 100%;
		height: 1700rpx;
	}
	
	.active{
		height: 2000rpx;
	}
	.container-showparts{
		height: 1990rpx;
	}
	.container-type-box {
		background-color: #FFFFFF;
		width: 100%;
		height: 400rpx;
		.item{
			width: 95%;
			height: 80rpx;
			.text{
				line-height: 80rpx;
				margin-top: 20rpx;
				width: 50%;
				font-size: 28rpx;
				&:last-child{
					text-align: center;
				}
			}
			
		}
		
	}

	.report-type-title {
		height: 40rpx;
		font-size: 28rpx;
		margin-left: 50rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 95%;
	}

	.report-type {
		border-top: 2rpx solid rgb(240, 240, 240);
		width: 95%;
		height: 250rpx;
		flex-wrap: wrap;

		.report-type-button {
			background-color: #1AAD19;
			width: 26%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			display: inline-block;
			font-size: 22rpx;
			border: 2rpx solid #D6D5D6;
			border-radius: 5000rpx;
			margin: 20rpx;
		}
	}

	.container-ischangeparts-box{
		margin-top: 10rpx;
		background-color: #FFFFFF;
		width: 100%;
		
		
		.container-ischangeparts {
			width: 95%;
			height: 100rpx;
			.text{
				width: 50%;
				font-size: 28rpx;
				
				&:last-child{
					text-align: center;
				}
			}
			
		}
		.container-parts {
			width: 95%;
			height: 300rpx;
			
			.item{
				width: 100%;
				height: 80rpx;
				.text{
					width: 50%;
					font-size: 28rpx;
					&:last-child{
						text-align: center;
					}
				}
			}
			
			
		}
		.container-mian-item {
			border-bottom: 1rpx solid rgb(240,240,240);
			width: 95%;
			align-items: center;
		}
	}

	.container-mian {
		background-color: #FFFFFF;
		width: 100%;
		height: 540rpx;

		.fault-box{
			width: 95%;
			height: 500rpx;
			.fault{
				margin-bottom: 20rpx;
				width: 100%;
				font-size: 28rpx;
				border-bottom: 2rpx solid rgb(240,240,240) ;
				height: 80rpx;
				align-items: flex-start;
				
			}
			.content-box{
				background-color: #EFEFF4;
				width: 100%;
				height: 420rpx;
				.fault-content{
					color: #666666;
					height: 410rpx;
					border: 2rpx solid rgb(240,240,240) ;
					width: 95%;
					margin: 0 auto;
					padding: 10rpx;
				}
			}
			
		}
		
		
		.container-mian-item {
			border-bottom: 1rpx solid rgb(240,240,240);
			width: 95%;
			align-items: center;
		}
	}

	.add-img {
		background-color: #FFFFFF;
		width: 100%;
		height: 630rpx;
		align-items: center;
		.text{
			margin-top: 20rpx;
			width: 95%;
			font-size: 28rpx;
			border-bottom: 1rpx solid rgb(240,240,240);
		}
		.img-box{
			align-self: flex-start;
			flex-wrap: wrap;
			width: 95%;
			margin: 0 auto;
			.img-container{
				margin: 10rpx;
				width: 158rpx;
				height: 158rpx;
			}
			
			
		}
	}
	
	.button-box{
		width: 95%;
		position: fixed;
		bottom: 20rpx;
		.button-bg{
			background-color: #1AAD19;
			color: #FFFFFF;
			height: 70rpx;
			width: 200rpx;
			text-align: center;
			line-height: 70rpx;
		}
		.assign{
			border-radius: 10rpx;
			
		}
		.entering{
			border-radius: 10rpx;
		}
	}
	
</style>
